<template>
  <view>
    <view
      class="flex-col list-item"
      style="margin-bottom: 12rpx"
      v-for="item in lists"
      :key="item.id"
      @click="blsClick(item)"
    >
      <view class="flex-row">
        <view class="flex-row items-center flex-1">
          <image class="shrink-0 image_5" :src="item.phone" />
          <view class="flex-col items-start flex-1 ml-15">
            <text class="font_2">{{ item.name }}</text>
            <text class="mt-16 font_2 text_5"
              >{{ item.graduationInstitution }}·{{ item.company }}</text
            >
          </view>
        </view>
      </view>
      <view class="flex-row items-center group_7 mt-5">
        <image class="shrink-0 image_6" src="/static/index/location2.png" />
        <text class="font_6 text_6">{{ item.distance }}km</text>
        <text class="font_7 text_7">擅长领域：{{ item.genius }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    lists: Array,
  },
  methods: {
    blsClick(item) {
      uni.navigateTo({
        url: `/pages/index/cw-doctor/doctor-detail/doctor-detail?id=${item.id}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.ml-15 {
  margin-left: 30rpx;
}

.mt-5 {
  margin-top: 10rpx;
}

.list-item {
  padding: 24rpx 24rpx 24rpx 32rpx;
  background-color: #ffffff;
  border-radius: 16rpx;

  .image_5 {
    border-radius: 84rpx;
    width: 108rpx;
    height: 108rpx;
  }

  .font_2 {
    font-size: 28rpx;
    font-family: PingFang SC;
    line-height: 26.02rpx;
    font-weight: 700;
    color: #000000;
  }

  .text_5 {
    line-height: 26.32rpx;
  }

  .group_6 {
    margin-top: 4rpx;
    line-height: 28.48rpx;
    height: 30.58rpx;

    .font_4 {
      font-size: 24rpx;
      font-family: D-DIN;
      line-height: 17.72rpx;
      color: #ff7676;
    }

    .font_3 {
      font-size: 40rpx;
      font-family: D-DIN;
      line-height: 28.48rpx;
      color: #ff7676;
    }

    .font_5 {
      font-size: 24rpx;
      font-family: PingFang SC;
      line-height: 22.22rpx;
      font-weight: 700;
      color: #999999;
    }
  }

  .group_7 {
    padding: 0 8rpx;

    .image_6 {
      width: 22rpx;
      height: 26rpx;
    }

    .font_6 {
      font-size: 24rpx;
      font-family: PingFang SC;
      line-height: 17.72rpx;
      color: #999999;
    }

    .text_6 {
      margin-left: 8rpx;
      line-height: 17.8rpx;
    }

    .font_7 {
      font-size: 24rpx;
      font-family: PingFang SC;
      line-height: 22.22rpx;
      color: #999999;
    }

    .text_7 {
      margin-left: 36rpx;
      line-height: 22.12rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }
  }
}
</style>